<template>
  <div
    id="container"
    name="container"
    class="parent p-20 page-wrapper d-flex flex-column div-main"
  >
    <div class="main-header">人员轨迹管理</div>
    <div id="info" class="info">
      <div class="info-title">人员信息</div>
      <div class="info-pic">
        <img src="avatar3.jpeg" />
        <div class="info-div">
          <div>姓名: 张晓婷</div>
          <div>性别: 女</div>
        </div>
      </div>

      <img
        src="map-marker.png"
        style="
          position: absolute;
          top: 150px;
          left: 135px;
          width: 50px;
          height: 50px;
        "
      />
    </div>
    <MyButton
      class="confirm"
      style="position: absolute; top: 300px; display: none"
      @click="handleConfirm"
      >{{ $t("common.confirmQueding") }}</MyButton
    >
    <div style="position: absolute; bottom: 20px; left: 30%; margin: auto">
      <ul id="menu">
        <li
          v-for="(todo, index) in todos"
          :key="todo.text"
          v-on:click="addClass(index, $event)"
          v-bind:class="{ blue: index == current }"
        >
          {{ todo.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import MyButton from "@/components/Button";
import { getMapList } from "@/views/maps/service";
import { getPersonList } from "@/views/label/service";
import util from "@/utils";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import {
  CSS3DRenderer,
  CSS3DObject,
  CSS3DSprite,
} from "three/examples/jsm/renderers/CSS3DRenderer";
export default {
  components: {
    MyButton,
  },
  data() {
    return {
      show: true,
      scene: null,
      texture: null,
      progress: 0.0,
      todos: [{ text: "一楼" }, { text: "二楼" }, { text: "三楼" }],
      current: -1,
      gltfModel: null,
      mark: null,
      building: null,
      // floor2: null,
      // floor3: null,
      // wall2: null,
      // wall3: null,
      showTrace: false,
      fst: [],
      sec: [],
      thd: [],
      floor1: new THREE.Group(),
      floor2: new THREE.Group(),
      floor3: new THREE.Group(),
      dir: null,
      dirTo: null,
      subM: null,
      mov: [
        { dir: "x", value: 3 },
        { dir: "x", value: -3 },
        { dir: "z", value: 13 },
        { dir: "z", value: -8 },
        { dir: "x", value: -9 },
      ],
      lastTime: 0,
      clock: new THREE.Clock(),
      // -11,4.5  -10,15
    };
  },
  mounted() {
    // this.getList();
    this.init();
    this.initObject();
    // this.loadModel("mark.glb");
    this.loadModel("build01.glb");
    this.createTag();
    this.animate();
  },
  methods: {
    init() {
      this.scene = new THREE.Scene();
      this.cssScene = new THREE.Scene();

      //初始化渲染器
      let container = document.getElementById("container");
      let height = container.offsetHeight;
      let width = container.offsetWidth;

      // 初始化相机
      this.camera = new THREE.PerspectiveCamera(
        50,
        width / height,
        0.01,
        10000
      );

      this.camera.position.set(33, 19, 26);
      this.camera.rotation.set(-Math.PI / 7, Math.PI / 4, Math.PI / 10);
      this.camera.lookAt(0, 0, 0);
      this.scene.add(this.camera);

      let hLight = new THREE.AmbientLight(0xffffff, 0.89);
      this.scene.add(hLight);

      let light1 = new THREE.DirectionalLight(0xffffff, 10);
      light1.position.set(50, 50, 50);
      this.scene.add(light1);

      ///  dom元素渲染器
      this.cssRender = new CSS3DRenderer({ antialias: true });
      this.cssRender.setSize(window.innerWidth, window.innerHeight);
      this.cssRender.domElement.style.position = "absolute";
      this.cssRender.domElement.style.top = "0";
      this.cssRender.domElement.style.outline = "none";
      this.cssRender.domElement.style.pointerEvents = "none";
      container.appendChild(this.cssRender.domElement);

      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        logarithmicDepthBuffer: true,
      });
      this.renderer.setSize(width, height);
      container.appendChild(this.renderer.domElement);

      //初始化控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);

      this.controls.minDistance = 5;
      this.controls.maxDistance = 5000;
      // // 上下旋转范围
      this.controls.minPolarAngle = 0; // radians
      this.controls.maxPolarAngle = Math.PI * 0.5; // radians
      // // 左右旋转范围

      window.addEventListener("resize", this.onWindowResize, false);
    },
    onWindowResize() {
      let container = document.getElementById("container");
      let height = container.offsetHeight;
      let width = container.offsetWidth;

      this.camera.aspect = width / height;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(width, height);
    },
    initObject() {},
    loadModel(modelName) {
      let that = this;
      const loader = new GLTFLoader();
      loader.setPath("/model/");

      var mats = new THREE.MeshBasicMaterial({
        color: 0xababab,
        transparent: false,
        opacity: 0.9,
      });
      var matGlow = new THREE.MeshStandardMaterial({
        color: 0x00eefa,
        emissive: 0x00eefa,
        emissiveIntensity: 10,
      });
      loader.load(modelName, (gltf) => {
        if (modelName == "mark.glb") {
          this.mark = gltf.scene;
          // 对模型进行放大
          this.mark.scale.set(20, 20, 20); // 按照需要的倍数进行放大
          this.mark.rotation.y = 0;
          this.mark.position.set(0, 0, 0);
          this.scene.add(this.mark);
        } else {
          this.building = gltf.scene;
          // 对模型进行放大
          this.scene.add(this.building);
        }
      });
    },
    animate() {
      this.renderer.render(this.scene, this.camera);
      this.cssRender.render(this.cssScene, this.camera);
      this.progress += 0.2;
      requestAnimationFrame(this.animate);

      const elapsedTime = this.clock.getElapsedTime();

      // 检查是否已经过了1秒
      if (elapsedTime - this.lastTime >= 0.2) {
        // 执行你的方法或者函数
        if (this.dir != null || this.mov.length > 0) {
          this.trace();
        }

        // 更新 lastTime
        this.lastTime = elapsedTime;
      }

      //   if (this.mark.scale.x < 30) {
      //     var s = this.mark.scale.x;
      //     s += 1;
      //     this.mark.scale.set(s, s, s);
      //   }
      // if (this.tag1.position.x < 10) {
      //   this.tag1.position.x += 0.1;
      // }
      // if (this.showTrace == true) {
      //   if (this.floor2.position.y < 10) {
      //     this.floor2.position.y += 0.8;
      //     this.wall2.position.y += 0.8;
      //     this.floor3.position.y += 1;
      //     this.wall3.position.y += 1;
      //   }
      // }
    },
    reset() {
      this.progress = 0.0;
    },
    //查询通行记录
    async getRecordList() {
      const res = await getPersonRecordList({
        personId: this.personId,
        mapId: this.mapId,
        startTime: this.startTime,
        endTime: this.endTime,
      });
      if (res.code == 200) {
        console.log(res.data);
        this.recordList = res.data;
        this.getNextValue();
      }
      return true;
    },
    async getPList() {
      const res = await getPersonList();
      if (res.code == 200) {
        res.data = res.data.map((item) => {
          return { user_name: item.name, value: item.personId };
        });
        console.log(res.data);
        this.user_name_list = res.data;
      }
      return true;
    },
    async getMap() {
      const res = await getMapList();
      this.mapListData = res.data;
    },
    trace() {
      if (this.dir == null) {
        if (this.mov.length > 0) {
          var position = this.mov.shift();
          this.dir = position.dir;
          this.dirTo = position.value;
        }
      }
      console.log("move to:" + this.dir + " " + this.dirTo);
      console.log(
        "position: x:" + this.tag1.position.x + "  z:" + this.tag1.position.z
      );
      if (this.dir == "x") {
        if (this.tag1.position.x < this.dirTo) {
          this.tag1.position.x += 0.5;
          if (this.tag1.position.x >= this.dirTo) {
            this.dir = null;
          }
        }
        if (this.tag1.position.x > this.dirTo) {
          this.tag1.position.x -= 0.5;
          if (this.tag1.position.x <= this.dirTo) {
            this.dir = null;
          }
        }
      }
      if (this.dir == "z") {
        if (this.tag1.position.z < this.dirTo) {
          this.tag1.position.z += 0.5;
          if (this.tag1.position.z >= this.dirTo) {
            this.dir = null;
          }
        }
        if (this.tag1.position.z > this.dirTo) {
          this.tag1.position.z -= 0.5;
          if (this.tag1.position.z <= this.dirTo) {
            this.dir = null;
          }
        }
      }
    },
    handleConfirm() {
      // dir: null,
      // dirTo: null,
      // subM: null,
      // mov: [{ dir: "x", value: 3 },{ dir: "x", value: 0 },{ dir: "z", value: 13 }],
      if (this.dir == null) {
        if (this.mov.length > 0) {
          var position = this.mov.shift();
          this.dir = position.dir;
          this.dirTo = position.value;
          this.movBegin = true;
        }
      }
      console.log("move to:" + this.dir + " " + this.dirTo);
      console.log(
        "position: x:" + this.tag1.position.x + "  z:" + this.tag1.position.z
      );
      if (this.dir == "x") {
        if (this.movBegin == true) {
          if (this.tag1.position.x < this.dirTo) {
            this.tag1.position.x += 0.5;
            if (this.tag1.position.x >= this.dirTo) {
              this.movBegin == false;
              this.dir = null;
            }
          }
          if (this.tag1.position.x > this.dirTo) {
            this.tag1.position.x -= 0.5;
            if (this.tag1.position.x <= this.dirTo) {
              this.movBegin == false;
              this.dir = null;
            }
          }
        }
      }
      if (this.dir == "z") {
        if (this.movBegin == true) {
          if (this.tag1.position.z < this.dirTo) {
            this.tag1.position.z += 0.5;
            if (this.tag1.position.z >= this.dirTo) {
              this.movBegin == false;
              this.dir = null;
            }
          }
          if (this.tag1.position.z > this.dirTo) {
            this.tag1.position.z -= 0.5;
            if (this.tag1.position.z <= this.dirTo) {
              this.movBegin == false;
              this.dir = null;
            }
          }
        }
      }
      //   const clonedCube = this.mark.clone();
      //   // 设置复制体的位置
      //   clonedCube.position.x = 10; // 假设向 x 轴正方向移动 3 个单位
      //   clonedCube.position.y = 10; // 假设向 y 轴正方向移动 1 个单位
      //   clonedCube.position.z = 10; // 假设向 z 轴负方向移动 2 个单位

      //   // 将复制体添加到场景中
      //   this.scene.add(clonedCube);
      //   console.log(clonedCube.scale);
      // var that = this;
      // this.building.traverse(function (child) {
      // if (child.includes("001")) {
      //   that.wall2 = child;
      // }
      // if (child.name == "wall002") {
      //   that.wall3 = child;
      // }
      // if (child.name == "floor001") {
      //   that.floor2 = child;
      // }
      // if (child.name == "floor002") {
      //   that.floor3 = child;
      // }
      //   if (child.isMesh) {
      //     console.log(child.name);
      //     if (child.name.includes("002")) {
      //       that.sec.push(child);
      //     } else if (child.name.includes("003")) {
      //       that.thd.push(child);
      //     } else {
      //       that.fst.push(child);
      //     }
      //   }
      // });
      // console.log(this.wall2);
      // console.log(this.wall3);
      // console.log(this.floor2);
      // console.log(this.floor3);
      // this.showTrace = true;
      // while (this.fst.length > 0) {
      //   var obj = this.fst.shift();
      //   this.floor1.add(obj);
      // }
      // while (this.sec.length > 0) {
      //   var obj = this.sec.shift();
      //   this.floor2.add(obj);
      // }
      // while (this.thd.length > 0) {
      //   var obj = this.thd.shift();
      //   this.floor3.add(obj);
      //   this.scene.add(this.floor3)
      // }
      // console.log(this.camera.position);
      // console.log(this.tag1.position);
      // console.log(this.tag1.rotation);
    },
    createTag() {
      let element = document.getElementById("info");
      this.tag1 = new CSS3DSprite(element);
      this.tag1.position.x = -10;
      this.tag1.position.y = 0;
      this.tag1.position.z = 0;
      this.tag1.scale.set(0.025, 0.025, 0.025);
      this.cssScene.add(this.tag1);

      // var points = [];
      // points.push(new THREE.Vector3(0, 0, 0));
      // points.push(new THREE.Vector3(20, 10, 0));

      // var geometry = new THREE.BufferGeometry().setFromPoints(points);
      // var material = new THREE.LineBasicMaterial({ color: 0x00afed });

      // // 创建线对象并添加到场景
      // var line = new THREE.Line(geometry, material);
      // this.scene.add(line);
    },
    addClass(index, event) {
      this.current = index;
      console.log(index);
    },
  },
};
</script>

<style lang="less">
.parent {
  font-size: 14px;
  height: 100%;
  //   background: #ababab;
  background: url("/t_bg.png") no-repeat center;
  border-radius: 20px;
  background-size: 100% 100%;
  width: 100%;
}
.main-header {
  width: 80%;
  height: 60px;
  position: absolute;
  top: 100px;
  background: url("/header-bg.png") no-repeat center;
  background-size: 100% 100%;
  color: #aabbdd;
  text-align: center;
  font-size: 30px;
  line-height: 60px;
  letter-spacing: 10px;
}
.info {
  height: 150px;
  width: 300px;
  background: url("/panel.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
}
.info-title {
  font-size: 16px;
  height: 55px;
  line-height: 60px;
  color: aliceblue;
  text-align: center;
}
.info-pic {
  padding: 10px 50px 10px 50px;
  color: aliceblue;
  display: flex;
}
.info-pic img {
  height: 60px;
  width: 60px;
}
.info-div {
  font-size: 13px;
  width: 130px;
  height: 60px;
  display: block;
  padding: 20px 0px 0px 30px;
}
.info-div div {
  height: 50%;
  line-height: 50%;
}

.info-detail {
  padding: 5px 50px 2px 50px;
  font-size: 13px;
  height: 30px;
  line-height: 23px;
  text-align: left;
  color: #02fe90;
}

.info-detail span {
  color: #02fe90;
  margin-left: 1.5rem;
}
.info-title:after {
  position: absolute;
  content: "";
  width: 80%;
  height: 1px;
  background: -webkit-linear-gradient(
    left,
    rgba(0, 216, 247, 0),
    #00afed,
    rgba(0, 216, 246, 0)
  );
  left: 50%;
  transform: translateX(-50%);
  top: 55px;
}

#menu {
  display: flex;
  cursor: pointer;
  transition: all 0.5s;
}
#menu li {
  font-size: 13px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: 3px;
  text-align: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.3);
  margin-right: 2px;
}

#menu li:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

#menu li:active {
  background-color: #1abc9c !important;
  color: black;
}
.blue {
  background-color: #1abc9c !important;
  color: white;
}
</style>
